<template>
  <div class="evaluate">
        <div>
            <ul id="pj" class="iconfont">
              <li>
                <h2>4.6</h2>
              </li>
              <li class="li1">
                <p>商家评分</p>
                <p id="xin">&#xe621;&#xe621;&#xe621;&#xe621;<i>&#xe621;</i></p>
              </li>
              <li>
                <p>味道</p>
                <h5>4.6</h5>
              </li>
              <li>
                <p>包装</p>
                <h5>4.7</h5>
              </li>
              <li>
                <p>配送</p>
                <h5>4.6</h5>
              </li>
            </ul>
        <!-- 评价 -->
        <div>
          <!-- 全部 -->
            <ul id="que">
            <template v-for="(items,index) in tags" >
                <li :key="index" :class="{'active': curTab === index}" @click="curTab = index">
                  {{items.name}}&ensp;{{items.count}}
                </li>
            </template>
            </ul>
        </div>
        <!-- 评价信息 -->
        <ul class="iconfont">
          <template v-for="(items,index) in comments">
              <li :key="index" class="huifu">
                <div class="huifu_left" v-if="items.length > 0">
                <img :src="'//fuss10.elemecdn.com/'+items.order_images.image_hash.substr(0,1)+'/'+items.order_images.image_hash.substr(1,2)+'/'+items.order_images.image_hash.substr(3)+'.jpeg?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/'">
                </div>
                <div class="huifu_right">
                  <a href="">{{items.username}}</a><br>
                  <i class="xin">&#xe621;&#xe621;&#xe621;&#xe621;&#xe621;</i>&ensp;<i>超赞</i><br>
                  <span>{{items.rating_text}}</span><br>
                  <div class="bei">
                    <span></span>
                  <b>商家回复:{{items.reply.content}}</b>
                  </div><br>
                  <strong>{{items.rated_at}}</strong>
                  </div>
              </li>
          </template>
        </ul>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "evaluate",
   data() {
    return {
      comments: [{
        reply:{},
        order_images:[]
      }],
      tags: [{}],
      curTab:0
    };
  },
  created() {
    axios.get("static/json/food.json").then(response => {
      // console.log(response);
      // this.comments = response.comments;
      // console.log(this.comments);
      this.comments = response.data.comments;
      this.tags = response.data.tags;
      // console.log(this.tags);
      // console.log(this.comments[0].reply.content)
      // console.log(this.recommend[0].items[0].name);
      // this.goods = response.data.menu;
      // console.log(this.comments[0].order_images[0].image_hash);
    });
  }
};
</script>

<style scoped lang="scss">
@import url(../../static/css/layout.css);
@import url(../../static/iconfont/iconfont.css);
#pj {
  display: flex;
  li {
    flex: 2.5;
    h2 {
      text-align: center;
      line-height: 43px;
      font-size: 34px;
      color: #ff6000;
    }
    p {
      text-align: center;
    }
    h5 {
      text-align: center;
    }
    #xin {
      color: #ffd100;
      i {
        color: #eeeeee;
      }
    }
  }
  .li1 {
    p {
      font-size: 13px;
      color: #666666;
    }
  }
}
#que{
  // display:flex;
  float: left;
  text-align: center;
  margin-top: 24px;
  padding-top: 11px;
  border-top:11px solid #f5f5f5;

  li{
    // flex: 4;
    line-height: 35px;
    float: left;
    margin-left: 10px;
    width: 82px;
    height: 35px;
    background: #ebf5ff;
    border-radius: 3px;
    margin-top:5px;
    font-size:13px;
    color:#6d7885;
  }
  .active{
    background: #0097ff;
    coLor:#fff;
  }
}
.huifu{
  width: 100%;
  // height: 200px;
  // background: pink;
  float: left;
  margin-top: 15px;
  position: relative;
  .huifu_left{
    float: left;
    padding-left: 21px;
    // padding-top: 20px;
    img{
      position: relative;
    left: 4px;
    top: 20px;
    }
  }
  .huifu_right{
    float: left;
    padding-left: 50px;
    // padding-top: 21px;
    a{
      font-size: 12px;
      color:#333;
    }
    .xin{
      font-size:12px;
      color:#ffbc00;
    }
    i{
      font-size:12px;
      color:#ff6000;
    }
    span{
      font-size:17px;
      color:#333;
    }

    .bei{
      width: 324px;
      height:81px;
      background: #f3f3f3;
      border-radius: 5px;
      text-align: left;
      line-height: 20px;
      padding-top: 10px;
      margin-left: -6px;
      position: relative;
      margin-top: 15px;
     span{
       display: block;
       width: 0;
       border-left: 9px solid transparent;
       border-right: 9px solid transparent;
       border-top: 9px solid transparent;
       border-bottom: 9px solid #f3f3f3;
       position: absolute;
       left: 21px;
       bottom: 91px;
     }
     b{
       font-size: 14px;
       color:#333;
       margin-left: 15px;
     }

    }
    strong{
     position: absolute;
     right: 10px;
     top: 23px;
     font-size: 11px;
     color:#a2a2a2;
     }
  }
}
</style>
